<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="referrer" content="never">
    <link rel="stylesheet" href="./css/base.css">
    <script src="./js/common.js"></script>
    <script src="./js/vue.js"></script>
    <script src="./datas/detail.js"></script>
    <link rel="import" href="./components/TopBar.html">
    <link rel="import" href="./components/FooterBox.html">
    <link rel="import" href="./components/UserComment.html">
    <title>电影详情</title>
    
</head>

<body>
    <!-- 项目容器 start-->
    <div class="app">
        <!-- 头部搜索框 start -->
        <top-bar></top-bar>
        <!-- 头部搜索框 end -->
        <!-- 首页正文 start -->
        <div class="content-box">
            <!-- 电影详情 start -->
            <div class="detail-box">
                <!-- 电影名称 -->
                <div class="film-name">{{film.filmName}}</div>
                <!-- 电影信息 stat-->
                <div class="film-info">
                    <div class="film-tip">
                        <div class="comment-count">
                            <div class="film-source" v-if="film.source">
                                <span class="star-img open" v-for=" n in Math.floor(film.source / 2) "></span>
                                <span class="star-img close" v-for=" n in 5-Math.floor(film.source / 2) "></span>
                                <span class="star-source">{{film.source}}</span>
                            </div>
                            <div class="star-count">93601短评</div>
                        </div>
                        <div class="film-desc">
                            <p>
                                <span>上映时间:</span>{{film.filmYear}}</p>
                            <p>
                                <span>电影类型:</span>{{film.filmTypes}}</p>
                            <p>
                                <span>参演明星:</span>{{ film.castNames }}</p>
                        </div>
                    </div>
                    <div class="film-img" :style=" 'background-image: url('+film.filmImg+')' "></div>
                </div>
                <!-- 电影信息 end-->
                <!-- 电影简介 start -->
                <div class="film-plot">
                    <div class="plot-title">剧情简介</div>
                    <div class="plot-content">{{film.filmDesc}}</div>
                </div>
                <!-- 电影简介 end -->
                <!-- 演员阵容 start -->
                <div class="film-actor">
                    <div class="actor-title">导演演员</div>
                    <div class="actor-list">
                        <div class="actor-item" v-for="(item, index) in castList" :key="index">
                            <div class="actor-img" :style=" 'background-image: url('+ item.photo +')' "></div>
                            <div class="actor-name">{{item.name}}</div>
                        </div>
                    </div>
                </div>
                <!-- 演员阵容 end -->
                <!-- 电影评论 start -->
                <div class="film-comments">
                    <div class="comment-title">相关评论</div>
                    <div class="comment-list">
                        <!-- 用户评论 start -->
                        <user-comment v-for="(item, index) in 5" :key="index"></user-comment>
                        <!-- 用户评论 end -->
                    </div>
                </div>
                <!-- 电影评论 end -->
            </div>
            <!-- 电影详情 end -->
        </div>
        <!-- 首页正文 end -->
        <!-- 底部评论区 start -->
        <footer-box :film=" film "></footer-box>
        <!-- 底部评论区 end -->
    </div>
    <!-- 项目容器 end-->
</body>
<script>
    new Vue({
        el:".app",
        data:{
            film:film.result,
            castList:{}
        },
        mounted() {
            this.castList = JSON.parse(film.result.castList)
            // console.log(this.castList)
        },
    })
</script>
</html>